<!--20210309  zaq  修改data中的user变量，与sql表一致-->
<!--20210318  zaq  修改data中user列，与后端保持一致-->
<!--20210324  zaq  用户数据user由父组件统一传值给子组件,新增注销按钮-->
<!--20210518  zaq  完成登录后用户信息同步-->
<!--20210519  zaq  使用vuex进行数据存放,修改登录登出逻辑-->

<template>
  <div id="note"  class="note">
    <div class="back">
<!--      存放背景-->

    </div>
    <!--    登陆界面-->
<!--    <login-vue-->
<!--        v-show="!isLogin"-->
<!--    ></login-vue>-->

    <!--主界面-->
    <!--  用户登录成功之后跳转的界面-->
    <div class="main" style="width: 100%;
    index:1;
    height: 100%;margin: 0;padding:0;text-align: left"
    >
      <el-container style="padding: 0;margin: 0;">
        <el-header  class="grid-content bg-purple-dark" v-show="isLogin"
                    style="height: 4em;width: 100% ;padding: 0;margin: 0">
          <el-row style="margin: 0;padding: 0;height: 2em">
            <el-row style="width: 100%;height: 2em;">
              <el-col :span="8" style="text-align: left">
                <img src="../public/imag/logo.png"
                     style="width: 125px;height: 60px;filter: alpha(opacity=40);opacity: 0.4"/>
              </el-col>
              <el-col :span="8" >
                  <span style="font-size: 30px ;color: white;padding: 0;height: 2em" v-show="isLogin">{{uPlanet}}

                </span>

              </el-col>
              <el-col :span="8">
                <el-link :underline="false"
                         @click="go_back"
                         type="primary"
                         style="float: right;color: white"
                >注销</el-link>
              </el-col>
            </el-row>
          </el-row>
        </el-header>
        <el-container style="padding: 0;margin: 0;height: 100%">
          <el-aside width="200px">
            <!--          导航栏-->
            <my-header  v-show="isLogin"  style=" width:100%;height: 100%;position: absolute"
                        v-bind:user="user"
                        v-on:updateUser="updateUser"
            ></my-header>
          </el-aside>
          <el-container style="height: 100%">
            <el-main  style="height: 100%;padding: 0;margin: 0">
              <!--          父子组件绑定-->
              <router-view
                  v-bind:user="user"
                  v-on:updateUser="updateUser"
                  style="height: 100%;padding: 0;margin: 0;position: absolute"
              ></router-view>
            </el-main>
          </el-container>
        </el-container>
      </el-container>

    </div>

  </div>
</template>

<script>
import login from "./views/Login.vue";
import header from "./views/Header.vue";

export default {
  data(){
    return{
      logoUrl:'../public/imag/logo.png',
      login:"0",//登录标志，0未登录，1登录
      loginflag:"0",//登录标志，0未登录，1登录
      uPlanet: '',
      user:{
        code:-1,
        note:'',
        uId:'1',//用户id
        uLogin:'admin',//用户名
        uName:'admin',//用户昵称
        uPwd:'',//密码
        uPlanet:'一颗大傻蛋',//小星球名字
        uCreatedate:'2021-2-20',//用户创建日期
        uBirthday:'1999-9-24',//生日
        uSex:'保密',//性别
        uStatus:'人就是要吃饭',//个性签名
        uAdmin:'1',//管理员标志
        delete:'0'//删除标志
      }
    }
  },
  components:{
    'login-vue':login,
    'my-header':header
  },
  methods:{
    //注销
    go_back(){
      sessionStorage.setItem("uId",null)
      this.$store.commit("userStatus",null,null)
      this.$router.push('/')
      console.log('注銷');
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //执行注销操作


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    //修改用户信息
    setUser(user){
      this.user=user;
      console.log('user:'+user);
    },
    //修改login值
    setLoginFlag(login,user){
      this.loginflag=login;
      this.login=login;

      this.user=user
      // this.$router.go(0);
      console.log("login:"+login)
      console.log("uId:"+this.user)
    },
    //更新用户信息
    updateUser(user){
      this.user=user;
    }
  },
  computed:{
    isLogin(){
      //判断是否登录
      var uId=sessionStorage.getItem("uId")
      var uPlanet=sessionStorage.getItem("uPlanet")
      if(uId!=null||uId!=-1||uId!=''||uId!='null'){
        this.$store.commit("userStatus",uId,uPlanet)
        console.log("login页面判断结果已登录,Id:"+uId)
        this.uPlanet=uPlanet
      }else{
        this.$store.commit("userStatus",-1,null)
        console.log("login页面判断结果未登录,Id:"+uId)
      }
      return this.$store.getters.isLogin
    }
  },
  mounted() {
  }

}
</script>


<style lang="scss">
.back{
  background-image: url("../public/imag/login_background.jpg");
  width: 100%;
  height: 100%;
  z-index:-1;
  position: fixed;
  padding: 0;
  margin: 0
}
.el-header, .el-footer {
  background-color: #3A4052;
  color: #333;
  text-align: center;
  line-height: 100px;
  padding: 0;
  margin: 0
}
body{
  margin: 0;
  padding: 0;
}
#note{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  border: 0;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
